
<template>
<div>
    <div style="text-align:left;margin-bottom:15px;">
      <Select v-model="social"  @on-change="getAnnouncementList" style="width:200px;" align="left">
          <Option  value="2" >全部</Option>
          <Option  value="1" >已读</Option>
          <Option  value="0" >未读</Option> 
      </Select>
    </div>  
<Table :loading="Tableloading" border  :columns="columns" :data="data6" id="ownannounce"></Table>
<br>
<Page :total="count" placement="top" :page-size-opts="opts" size="small" :page-size="size" show-total show-elevator show-sizer   @on-change="changePage" @on-page-size-change="changeSize"></Page>
</div>

</template>

<script>
import announcement from "service/announcement.js";
import {
  mapGetters
} from 'vuex'
export default {
  name: "ownannouncement",
  data() {
    return {
      page: 0,
      size: 10,
      count:0,
      opts:[10],
      loading: true,
      Tableloading: true,
      social: "2",
      columns: [
        {
          title: "标题",
          key: "title",
          align: "center"
        },
        {
          title: "状态",
          key: "readeTime",
          align: "center"
        },
        {
          title: "公告类型",
          key: "noticeType",
          align: "center",
          render: (h, params) => {
            return h("div", [h("div", {}, this.changeNoticeType(params.row))]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.row);
                    }
                  }
                },
                "详情"
              )
            ]);
          }
        }
      ],
      data6: []
    };
  },
  computed: {
    ...mapGetters({
      loginUserInfo: 'loginUserInfo',
    }),
  },
  watch: {
      loginUserInfo(newVal, oldVal) {
          this.getAnnouncementList()
      }
  },
  methods: {
    show(row) {
      let userKey = this.loginUserInfo.userId;
      this.getAnnounceInfo(row.id,userKey);
    },
    changeNoticeType(row) {
      if (row.noticeType === "2") {
        return "跑马灯";
      } else{
        return "普通公告";
      }
    },
    changePage(response) {
      var _that = this;
     _that.page = response-1;
     _that.getAnnouncementList();
    },
    changeSize(response) {
      var _that = this;
      _that.size = response;
      _that.getAnnouncementList();
    },
    async getAnnouncementList() {
       if(!this.loginUserInfo.userId){
          return false;
        }
        let search_data={
           pageNumber:this.page,
           pageSize:this.size
        };
        let userKey = this.loginUserInfo.userId;
        let vm = this;
        let jsondata = await announcement.list(search_data,userKey,"",vm.social)
        vm.Tableloading=false;
        vm.count=jsondata.numberOfElements
        vm.data6=jsondata.content;
        for (var i = 0; i < this.data6.length; i++) {
          if (this.data6[i].readeTime) {
            this.data6[i].readeTime = "已读";
            this.data6[i].cellClassName = {readeTime:"hasread"}
          }else{
            this.data6[i].readeTime = "未读";
            this.data6[i].cellClassName = {readeTime:"noread"}
          }
        }
    },
    async getAnnounceInfo(id,userkey){
       let vm = this;
        let jsondata = await announcement.getAnnounceInfo(id,userkey);
        if(jsondata.id){
          this.getAnnouncementList();
          vm.$Modal.info({
              title: "公告详情",
              content: `<span class='info_title'>标题：</span>${jsondata.title}<br><br><span class='info_title'>内容：</span>${jsondata
                .desp}<br><br><span class='info_title'>有效期：</span>${jsondata
                .startTime}&nbsp;至&nbsp;${jsondata
                .endTime}`
            });
        }else{
          this.$Message.error("查询详情失败"); 
        }
    }
  },
  mounted: function() {
    this.getAnnouncementList();

  }
};
</script>
<style>
.info_title{
  font-weight: 600;
  color:#196AC1;
}
#ownannounce .hasread {
  color:green;
  font-weight: 600;
}
#ownannounce .noread {
  color:red;
  font-weight: 600;
}
</style>

